<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        title="角色设置"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="后台登录" prop="pc_login">
                <el-select
                    v-model="formData.pc_login"
                    placeholder="管理后台是否允许登录"
                >
                    <el-option
                        v-for="item in staffLoginData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
            v-if="formData.pc_login == '1'"
            label="后台角色" prop="pc_role_data">
                <el-select
                    v-model="formData.pc_role_data"
                    placeholder="请选择后台角色"
                    multiple
                >
                    <el-option
                        v-for="item in roleData"
                        :key="item.role_sn"
                        :label="item.role_name"
                        :value="item.role_sn"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="移动端登录" prop="app_login">
                <el-select
                    v-model="formData.app_login"
                    placeholder="移动端登录是否允许登录"
                >
                    <el-option
                        v-for="item in staffLoginData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmitBefore">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action, Getter, State } from 'vuex-class';
import { mixinDialogForm } from '@/mixin/dialog/Form';
@Component({
    mixins: [mixinDialogForm]
})
export default class purviewStaffAuth extends Vue {
    // 编辑
    @Action('purviewStaff/auth') itemEdit: any;

    @Action('purviewRole/all') getRole: any;
    @Getter('purviewRole/all') roleData: any;
    @State((state) => state.sharing.staffLoginData) staffLoginData: any;
    editInit(data: any) {
        const me = this as any;
        data.pc_login = data.pc_login.toString();
        data.app_login = data.app_login.toString();
        data.pc_role_data = data.pc_role;
        data.app_role_data = data.app_role;
        me.formData = Object.assign({}, me.formData, data);
    }

    created() {
        this.getRole();
    }

    // 保存
    onSubmitBefore() {
        const me = this as any;
        me.formData.pc_role = me.formData.pc_role_data.toString();
        me.onSubmit();
    }
    // 表单数据
    formData: any = {
        pc_login: '',
        pc_role: '',
        pc_role_data: [],
        app_login: '',
        app_role_data: [],
        app_role: ''
    };

    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        pc_role_data: [
            {
                required: true,
                message: '请选择所属角色'
            }
        ],
        pc_login: [
            {
                required: true,
                message: '请选择用户是否允许后台登录'
            }
        ],
        app_login: [
            {
                required: true,
                message: '请选择用户是否允许后台移动端'
            }
        ]
    };
}
</script>
